今天的標題有些奇特,是的,我個人深深覺得,JavaScript入門難,精通更難,所以,一般來說,如果有一定的必要,非用JavaScript不可的工作,否則,能避免深入JavaScript就避免。
如果免不了要使用JavaScript,就盡量使用Google能找到的範例來使用,會比較自行刻代碼來的省事。
當然,如果你立志做JavaScript大師,那麼這兩句話就當廢話來看可以。
為什麼我要下這個標題,因為JavaScript經過這些年的發展,Node.js的興起和各JavaScript門派的大神們的刻苦創新招式,JavaScript己經成為百花齊放,各種套件、框架、控件層出不窮的大千世界。你開始學習其中一個招式,馬上就有大神文告訴你,還要學會這個,那個,如果會這個,要不要在學一學這個的那(ㄋㄟ)個和那(ㄋㄚ)個。
啊,扯遠了,就當我在抱怨吧。
今天我們要再來談談Vue.js和ASP.NET Core的整合。
一開始,我們打開Visual Studio的新增專案對話窗,然後注意對話窗左邊中門下方一點點有一串藍色字連結:
[開啟Visual Studio安裝程式],找到了就點下去,打開Visual Studio的安裝程式。
Visual Studio安裝程式啟動以後,找一下Node.js開發,勾選這個安裝選項,然後點[修改],這是說要修改Visual Studio的環境的意思。因Visual Studio還啟動著,所以跳出下列訊息。
去把Visual Studio關閉,點[重試]就會完成安裝程序。為什麼要安裝Node.js,因為Vue.js。但接下來,大神們不滿足於你只會Node.js,你還要會NPM,要會GULP,如果可以,去看看什麼是TypeScript吧。等一下,還沒出門就把門檻加高到無法跨出去,是沒必要的吧。
安裝好Node.js,VIsual Studio安裝程式顥示如下,
唉,到底裝好了沒?先直接關掉這個安裝程式,然後打開Visual Studio,再次執行新建專案,然後在新增專案視窗左邊的範本集裏,可以看到JavaScript和TypeScript兩者下都有Node.js的範本集。如下兩圖所示,有看到Vue.js Web應用程式範本吧?
我們先選用JsvaScript裏的[基本Vue.js Web應用程式]範本(其實TypeScript裏的Vue.js專案範本也是一樣的),指派好專案名稱和資料夾後,就按下[確定]把專案建起來吧。
建好的Vue.js專案,其方案總管中有看起來如下圖的資料夾及檔案。
好吧,看起來又是另外一回事了,似乎也沒了MVC架構,其實不是這樣子,因為這是[基本]的Vue.js專案,[基本],再強調一次,[基本],也就是說,請你開始自行刻MVC程式囉。
沒問題的話,就從NPM開始吧。打開npm資料夾,可以發現三個npm套件都有驚嘆號的標示,
也被註記(遺漏)字眼,請先由Vue套件開始,游標指向Vue套件,按右鍵然後選擇[安裝遺漏的NPM套件]。
但是,報錯了。
這是因為Node.js還沒安裝啟動,或者是環境沒指派到Node.js在資料夾,Visual Studio沒法自動啟動Node.js。所以,接下來,我們來安裝Node.js資料夾。
在繼續下去之前,我們先看一下main.ts,這是TypeScript檔案,也是專案的啟始檔案。檔案的內容,如下圖,
你可以看見[找不到模組Vue]的訊息,這是因為NPM裏,還沒有Vue模組的完整下載。
現在,讓我們來完成安裝Node.js,奇怪那剛才執行的Visual Studio安裝動作,在裝什麼?喔,那只是安裝專案範本而己。在Visual Studio的功能表下,可以看到一行黃底警告,說是沒找不到Node.js的執行階段,我們點一下右邊的[下載Node.js],Node.js的官網下載頁面被打開,我的電腦是WIndows 10 64位元版本,所以選擇Windows Installer 64bits。
然後問你要如何處理下載檔案,我選擇[執行]
下載完成時,就自動啟動安裝程序:
(咚、咚、咚)
安裝過程我就不再詳細截圖了,總之就是接受版權限制,下一步下一步就行了。最後,出現Node.js安裝精靈完成,就行了。
Node.js安裝完成後,回到Visual Studio,再次執行Vue的[安裝遺漏的NPM套件]的動作,這回沒有報錯,靜止幾秒鐘,Visual Studio的輸出視窗顥示下列訊息,表示Vue套件安裝完成了,
我們再去看方案總管,可以看到vue@2.5.17的驚嘆號消失,變成可用的套件,
而main.ts檔中的vue也不再是找不到的模組了。
接下來,我們再去把方案綏總管中,另外,兩個遺漏失的NPM套件安裝起來。
現在,我們來執行網站看看,如下圖所指點選[網頁伺服器];
結果還是報錯,
說是找不到Node類型定義檔案,如下圖錯誤清單所示。
我今天先談到這裏,明天再來告訴各位怎麼排除這個問題。意思就是欲知後事如何,請看下回分解。
「師父師父,我研究了市面上所有的 javascript framework,發明出一套完美的 framework」
「那叫什麼?」
「還是 javascript」
Node.js之父談Node.js的十大技術債
還好我還沒學
不學沒辦法搞前端啊...嗚嗚。
JS真的很難學。
不過DENO似乎不是為了取代NODE的東西,方向性好像不太相同。
海綿寶果然深得JavaScript精髓啊!